<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <style>
        table tr td:first-child {
            text-align: right;
        }

        fieldset {
            width: 350px;
        }

        .register {
            width: 400px;
            margin: auto;
        }

        h3 {
            width: 100px;
            margin: auto;
        }

        .btn {
            width: 200px;
            margin: auto;
        }

        .no {
            width: 100px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="register">
        <h3>用户注册</h3>
        <form action="#" method="get">
            <fieldset>
                <legend>身份验证-必填信息</legend>
                <table align="center">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username"></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td>密码确认</td>
                        <td><input type="password" name="repassword"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>身份信息-选填信息</legend>
                <table align="center">
                    <tr>
                        <td>所在城市</td>
                        <td><input type="text" name="city"></td>
                    </tr>
                    <tr>
                        <td>工作单位</td>
                        <td><input type="text" name="work"></td>
                    </tr>
                    <tr>
                        <td>家庭住址</td>
                        <td><input type="text" name="address"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>其他个人信息</legend>
                <table align="center">
                    <tr>
                        <td>性别</td>
                        <td>
                            <select name="sex">
                                <option value="boy">男</option>
                                <option value="girl">女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            <input type="checkbox" name="hobby" value="music">音乐
                            <input type="checkbox" name="hobby" value="sport">体育
                            <input type="checkbox" name="hobby" value="computer" checked>计算机
                        </td>
                    </tr>
                    <tr>
                        <td>喜欢的公司</td>
                        <td>
                            <input type="radio" name="likecompany" value="baidu">百度
                            <input type="radio" name="likecompany" value="microsoft">微软中国
                            <input type="radio" name="likecompany" value="google">谷歌中国
                        </td>
                    </tr>
                    <tr>
                        <td>个人简介</td>
                        <td>
                            <textarea name="introduction" cols="30" rows="3"></textarea>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div class="btn">
                <input type="submit" value="提交您的资料">
                <input type="reset" value="重新填写资料">
            </div>
            <div class="no">
                <input type="button" name="" value="无效按钮" disabled>
            </div>
        </form>
    </div>
</body>

</html>